<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        //    发布订阅
        // 原始的做法
        //    假如饿了去楼下买包子，包子没做好，就回来了
        //    过10分钟又去了  看有没有做好
        //    。。。

        // 改善
        //     假如张三饿了去楼下买包子，包子每做好，  留下顾客的联系方式       订阅
        //     假如李四饿了去楼下买包子，包子每做好，  留下顾客的联系方式       订阅

        //     等到包子做好了   就统一联系         发布消息



        // [
        //     {
        //         user,
        //         fn
        //     },
        //     {
        //         user,
        //         fn
        //     },
        //     {
        //         user,
        //         fn
        //     },
        // ]



        class BaoZi {
            constructor(name) {
                this.name = name;
                this.msg = [];
            }

            // 订阅
            add(user, fn) {
                // 先看一下这个人有没有定过包子   -- 有没有一个user是张三的  some / filter
                if (this.msg.some(item => item.user === user)) {
                    return
                }
                else {
                    this.msg.push({ user, fn })
                }

            }

            // 发布
            trigger() {
                this.msg.forEach(item => {
                    item.fn()
                })
            }

            // 取消
            remove(user) {
                // 删除  pop  splice 需要找下标  不好用
                // 删除  找到所有需要的数据，过滤掉不需要的数据  filter
                this.msg = this.msg.filter(item => item.user !== user);
            }
        }

        const baoXianSen = new BaoZi('bsx');
        baoXianSen.add('张三', function () {
            console.log('张三需要包子');
        })

        baoXianSen.add('李四', function () {
            console.log('李四需要包子');
        })

        baoXianSen.add('张三', function () {
            console.log('张三需要包子');
        })

        console.log(baoXianSen.msg);


        baoXianSen.trigger()

        baoXianSen.remove('张三')

        baoXianSen.remove('李四')


        console.log(baoXianSen.msg);



    </script>

</body>

</html>